<template>
  <div class="d2">
    <button @click="add_btn">发表游记</button>
    <div class="d3">
      <table>
        <tr>
          <td>ID</td>
          <td>标题</td>
        </tr>
        <tr v-for="i in list">
          <td>{{i.id}}</td>
          <td ><router-link :to="{name:'ShowArticle',params:{'id':i.title}}">{{i.title}}</router-link></td>
        </tr>
      </table>
      <button @click="up_btn">上一页</button>
      <button v-for="i in page_list" @click="get_page(i)">{{i}}</button><button @click="down_btn">下一页</button>
    </div>
    <div class="dl" v-if="this.token">
        <div style="width: 200px;height: 200px">
          <div><img :src="'http://127.0.0.1:8000'+list1.head_portrait" style="width: 100px;height: 100px;"></div>
          <div>{{list1.user}}</div>
          <div>{{list1.label}}</div>
        </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "Show",
        data(){
          return{
            list:[],
            uid:1,
            page_num:0,
            page_list:[],
            list1:[],
            token:sessionStorage.getItem('token')
          }
        },
        methods:{
          show_page(){
            axios({
              url:'http://127.0.0.1:8000/app01/paginator/'+this.uid,
              method:'get',
            }).then(res=>{
              console.log(res)
            this.list=res.data.data
            this.page_num=res.data.page_num
            this.page_list=res.data.page_list
          })
          },
          get_page(id){
            this.uid=id
            this.show_page()
          },
          up_btn(){
            if(this.uid==1){

            }else {
              this.uid--
              this.show_page()
            }
          },
          down_btn(){
            if(this.uid<this.page_num){
              this.uid++
              this.show_page()
            }
          },
          add_btn(){
            if(this.token){
              this.$router.push('/AddArticle')
            }else {
              alert('请先登录')
              this.$router.push('/Login')
            }
          }
        },
        created() {
          this.show_page()
          axios({
              url:'http://127.0.0.1:8000/app01/showuser/',
              method:'get',
              params:{
                'token':this.token
              }
            }).then(res=>{
              console.log(res)
            this.list1=res.data
            })
        }
    }
</script>

<style scoped>
  table,tr,td{
    border: 1px solid black;
    border-collapse: collapse;
    background: antiquewhite;
  }
  tr,td{
    width: 150px;
    height: 150px;
  }
  .d2{
    width: 100%;
    height: 100%;
  }
  .d3{
    float: left;

  }
  .dl{
    float: right;
    width: 200px;
    height: 200px;
    white-space: pre-wrap;
  }

</style>